<template>
  <!-- 画板 -->
    <div class="borad-container">
      <div class="option-container">
        <div>
          <input type="file" value="" id="file" @change='onUpload'>
        </div>
        <Select v-model="fileName" style="width:200px" @on-change="fileChange">
          <Option v-for="item in fileList" :value="item.id" :key="item.id">{{ item.id }}</Option>
        </Select>
        <ul class="toolbar_ul" >
          <li  v-for="(tool,index) in tools"
            :key="index"
            :data-tool="tool.dataTool"
            :class="[index==selectedToolIndex?'active':'toolbar_li']">
            <i :class="tool.toolClass" @click="selectTool(tool,index)"></i>
          </li>
        </ul>
      </div>
      <div class="panel-container" id="panel">
        <canvas id="myCanvas" ref="myCanvas" width="600" height="600" class="painter-box" @mousedown="painting($event)"></canvas>
      </div>
      <!--T 输入框-->
      <input type="text"
          name="inputText"
          class="input-position"
          v-model="inputTextValue"
          :style="{
              left:inputTextPosition.x+'px',
              top:inputTextPosition.y+'px',
              height:lineWidth < 14 ? 14+'px':lineWidth+'px',
              fontSize:lineWidth < 14 ? 14+'px':lineWidth+'px',
              color:'#'+pageLineColor
          }"
          v-show="inputTextShow"
          @click="bindInputText($event)"
          v-cloak
      >
      <!-- 临时矩形 -->
      <div class="tempRect"
        :style="{
          width:rectTempAttr.width+'px',
          height:rectTempAttr.height+'px',
          left:rectTempAttr.left+'px',
          top:rectTempAttr.top+'px',
          borderWidth:rectTempAttr.borderWidth+'px',
          borderStyle:rectTempAttr.borderStyle,
          borderColor:'#'+rectTempAttr.borderColor,
        }"
        v-show="rectTempPositionShow"
        v-cloak
      ></div>
    </div>
</template>

<script>
import qs from 'qs'
export default {
  props:['socket','formItem','fileList','drawData'],
  data() {
    return {
        photoFile:null,
        canvas:'',
        ctxOrign:'',
        currentToolNum: '1', // 当前是哪个工具
        selectedToolIndex: '0',
        tools: [ //工具列表
            {dataTool: '1', toolClass: 'fa fa-pencil fa-2x'},
            {dataTool: '2', toolClass: 'fa fa-font fa-2x'},
            {dataTool: '3', toolClass: 'fa fa-square-o fa-2x'},
            {dataTool: '4', toolClass: 'fa fa-mouse-pointer fa-2x'},
            {dataTool: '5', toolClass: 'fa fa-eraser fa-2x'},
        ],
        pageLineColor: '000000',//线条颜色
        lineWidth:'1',//线条宽度
        pageFillColor:'ffffff',
        inputTextShow: false, //文字输入时临时框
        rectTempPositionShow: false,
        inputTextPosition: {
            x: '200',
            y: '200'
        },
        inputTextValue: '',
        rectTempAttr: { //方框初始值
            width: '0',
            height: '0',
            left: '0',
            top: '0',
            borderWidth: '1',
            borderStyle: 'solid',
            borderColor: '000000',
            backgroundColor: 'ffffff'
        },
        // 箭头相关的东西
        beginPoint:{},
        stopPoint:{},
        polygonVertex:[],
        CONST:{
            edgeLen: 50,
            angle: 25
        },
        angle:'',
        // 传给后台的东西
        fileName:'',
        linePointArr:{},  //传给后台的直线集合
        imgId:'', //传给后台的图片id
        imgSrc:'', //传给后台的图片路径
        fontArr:{},//传给后台的字体集合
        rectArr:{},//传给后台的矩形集合
        eraserArr:{},//传给后台的橡皮集合
        arrowArr:{},//传给后台的箭头数据集合
        typeArr:[],
        bothTypeArr:null,
        rectArrData:{},//传给后台画矩形
        arrowArrData:{},//传给后台画箭头
        canvasUrl:'',
    }
  },
  mounted(){
    this.ctxOrign=$('canvas')[0].getContext('2d');
  },
  watch:{
    drawData:{//深度监听，可监听到对象、数组的变化
      handler(){
        this.getDrawCanvas(this.drawData)
      },
      deep:true
    },
    getUserIcons(){//深度监听，可监听到对象、数组的变化
      if(this.$store.state.imgBtn){
        this.socket.emit('draw_info_draw',this.bothTypeArr);
        this.$store.commit("imgBtnClick",false);
      }
    },
    getChatImg(){
      this.loadImage(this.$store.state.chatImg)
      this.$store.commit("changeImg",'');
    }
  },
  computed: {
    getUserIcons() {
      return this.$store.state.imgBtn;
    },
    getChatImg(){
      return this.$store.state.chatImg;
    }
  },
  methods: {
    // 上传文件
    onUpload(e){
      var formData = new FormData();
      formData.append('photos', e.target.files[0]);
      formData.append('roomid', this.formItem.roomId);
      formData.append('uploads_account', this.formItem.name);
      if(formData){
        this.$http.post('http://192.168.1.232:8888/api/files_upload',formData)
        .then( (response)=> {
          console.log(response);
          this.getFileList();
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    },
    //发送获取文件列表请求
    getFileList(){
      let filedata = {
        tablename:'file_room', //查询哪个表的数据(可变)
        query: { //查询条件
          roomid:'='+this.formItem.roomId,//房间号前拼接'='
        }
      };
      this.socket.emit("no_page",filedata);
    },
    fileChange(value){
      for(let item of this.fileList){
        if(value==item.id){
          this.imgId=item.id
          this.imgSrc=item.httpurl
        }
      }
      this.loadImage(this.imgSrc)
      // let img = new Image();
      // img.onload = ()=> {
      //   this.ctxOrign.drawImage(img, 0, 0,600,600);
      // };
      // img.src = this.imgSrc;
    },
      // 工具 ~选择
    selectTool(tool, index) {
      this.currentToolNum = tool.dataTool;
      this.selectedToolIndex = index;
    },
    //在CONST中定义的edgeLen以及angle参数
    //短距离画箭头的时候会出现箭头头部过大，修改：
    dynArrowSize(){
      var x = this.stopPoint.x - this.beginPoint.x,
          y = this.stopPoint.y - this.beginPoint.y,
          length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
      if (length < 250) {
          this.CONST.edgeLen = this.CONST.edgeLen/2;
          this.CONST.angle = this.CONST.angle/2;
      }
      else if(length<500){
          this.CONST.edgeLen=this.CONST.edgeLen*length/500;
          this.CONST.angle=this.CONST.angle*length/500;
      }
    },
    //getRadian 返回以起点与X轴之间的夹角角度值
    getRadian(beginPoint, stopPoint) {
        this.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
        this.paraDef(50,25);
        this.dynArrowSize();
    },
    ///获得箭头底边两个点
    arrowCoord(beginPoint, stopPoint) {
        this.polygonVertex[0] = beginPoint.x;
        this.polygonVertex[1] = beginPoint.y;
        this.polygonVertex[6] = stopPoint.x;
        this.polygonVertex[7] = stopPoint.y;
        this.getRadian(beginPoint, stopPoint);
        this.polygonVertex[8] = stopPoint.x - this.CONST.edgeLen * Math.cos(Math.PI / 180 * (this.angle + this.CONST.angle));
        this.polygonVertex[9] = stopPoint.y - this.CONST.edgeLen * Math.sin(Math.PI / 180 * (this.angle + this.CONST.angle));
        this.polygonVertex[4] = stopPoint.x - this.CONST.edgeLen * Math.cos(Math.PI / 180 * (this.angle - this.CONST.angle));
        this.polygonVertex[5] = stopPoint.y - this.CONST.edgeLen * Math.sin(Math.PI / 180 * (this.angle - this.CONST.angle));
    },
    //获取另两个底边侧面点
    sideCoord() {
        var midpoint = {};
        midpoint.x=(this.polygonVertex[4]+this.polygonVertex[8])/2;
        midpoint.y=(this.polygonVertex[5]+this.polygonVertex[9])/2;
        this.polygonVertex[2] = (this.polygonVertex[4] + midpoint.x) / 2;
        this.polygonVertex[3] = (this.polygonVertex[5] + midpoint.y) / 2;
        this.polygonVertex[10] = (this.polygonVertex[8] + midpoint.x) / 2;
        this.polygonVertex[11] = (this.polygonVertex[9] + midpoint.y) / 2;
    },
    //画箭头
    drawArrow() {
      this.ctxOrign.fillStyle = this.pageLineColor;
      this.ctxOrign.beginPath();
      this.ctxOrign.moveTo(this.polygonVertex[0], this.polygonVertex[1]);
      this.ctxOrign.lineTo(this.polygonVertex[2], this.polygonVertex[3]);
      this.ctxOrign.lineTo(this.polygonVertex[4], this.polygonVertex[5]);
      this.ctxOrign.lineTo(this.polygonVertex[6], this.polygonVertex[7]);
      this.ctxOrign.lineTo(this.polygonVertex[8], this.polygonVertex[9]);
      this.ctxOrign.lineTo(this.polygonVertex[10], this.polygonVertex[11]);
      this.ctxOrign.closePath();
      this.ctxOrign.fill();
    },
    //自定义参数
    paraDef(edgeLen, angle) {
      this.CONST.edgeLen = edgeLen;
      this.CONST.angle = angle;
    },
    // 绘图
    painting:function(e){
      var _self = this;
      var canvas = $(e.target);
      var ctx = this.ctxOrign;
      var canvasAttribute = {
          width: parseInt(this.getAttrValue(canvas, 'width', 'px')),
          height: parseInt(this.getAttrValue(canvas, 'height', 'px')),
          left: parseInt(canvas.position().left),
          top: parseInt(canvas.position().top)
      }
      var canvasWidth=600;
      var canvasHeight=600;
      var xTemp, yTemp, wTemp = 0, hTemp = 0, rTemp = 0;//用于临时矩形和圆形
      var moving = false;
      var fontSize;
      var lineWidth;//用于橡皮擦
      var mouseStyle = $('<div></div>'); //用于临时橡皮擦
      $(document).on('mousedown', 'canvas', function (e) {
        _self.canvasUrl = document.getElementById('myCanvas').toDataURL();
        e.stopImmediatePropagation();
        switch (_self.currentToolNum) {
            case '1':
                moving = true;
                ctx.beginPath();
                ctx.lineCap = "butt";
                ctx.strokeStyle = '#' + _self.pageLineColor;
                ctx.lineWidth = _self.lineWidth;
                ctx.moveTo(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top);
                // 传给服务器的数据
                _self.linePointArr={
                  "data":{
                    "x":[],
                    "y":[],
                    },
                    "attr":{
                      "size":_self.lineWidth,
                      "color":'#' + _self.pageLineColor
                    }
                }
                _self.linePointArr.data.x.push((e.pageX - canvas.offset().left)/canvasWidth);
                _self.linePointArr.data.y.push((e.pageY - canvas.offset().top)/canvasHeight);
                break;
            case '2':
                moving = true;
                fontSize = _self.lineWidth < 12 ? 12 : _self.lineWidth;
                if (!_self.inputTextShow) {
                    _self.inputTextShow = true;
                    _self.inputTextPosition.x = e.pageX;
                    _self.inputTextPosition.y = e.pageY;
                } else {
                    if (!(!canvas.is(e.target) && canvas.has(e.target).length === 0)) {
                        _self.inputTextShow = false;
                        if (_self.inputTextValue != '' && _self.inputTextValue != undefined
                            && _self.inputTextValue != null) {
                            ctx.font = fontSize + "px Microsoft Yahei";
                            ctx.fillStyle = '#' + _self.pageLineColor;
                            ctx.textBaseline = "top";
                            ctx.fillText(_self.inputTextValue,
                                _self.inputTextPosition.x - canvasAttribute.left,
                                _self.inputTextPosition.y - canvasAttribute.top-60);
                            ctx.fillStyle = '#' + _self.pageLineColor;
                            // 传给服务器的数据
                            _self.fontArr={
                              "data":{
                                "x":(_self.inputTextPosition.x - canvasAttribute.left)/600,
                                "y":(_self.inputTextPosition.y - canvasAttribute.top-60)/600,
                                "text":_self.inputTextValue},
                              "attr":{"size":fontSize + "px Microsoft Yahei","color":'#' + _self.pageLineColor}
                            }
                            _self.drawImage('font');
                            _self.drawCanvas('font')
                            _self.inputTextValue = "";
                        }
                    }
                }
                break;
            case '3':
                moving = true;
                ctx.lineWidth = _self.lineWidth;
                ctx.strokeStyle = '#' + _self.pageLineColor;
                ctx.fillStyle = '#' + _self.pageFillColor;
                _self.rectTempAttr.left = e.pageX;
                _self.rectTempAttr.top = e.pageY;
                _self.rectTempAttr.width = '0';
                _self.rectTempAttr.height = '0';
                _self.rectTempAttr.borderWidth = _self.lineWidth;
                _self.rectTempAttr.borderColor = _self.pageLineColor;
                _self.rectTempAttr.backgroundColor = _self.pageFillColor;
                xTemp = e.pageX - canvas.offset().left;
                yTemp = e.pageY - canvas.offset().top;
                _self.rectTempPositionShow = true;
                _self.rectArrData={
                  "data":{
                    "x":(e.pageX - canvas.offset().left)/canvasWidth,
                    "y":(e.pageY - canvas.offset().top)/canvasHeight
                  },
                  "attr":{"size":_self.lineWidth,"color":'#' + _self.pageLineColor}
                }
                break;
            case '4':
                moving = true;
                _self.beginPoint.x = e.pageX - canvas.offset().left;
                _self.beginPoint.y = e.pageY - canvas.offset().top;
                _self.arrowArrData={
                  "data":{
                    "x":(e.pageX - canvas.offset().left)/canvasWidth,
                    "y":(e.pageY - canvas.offset().top)/canvasHeight
                  },
                  "attr":{"size":_self.lineWidth,"color":'#' + _self.pageLineColor}
                }
                break;
            case '5':
              moving =true;
              ctx.beginPath();
              lineWidth = _self.lineWidth < 12 ? 12 : _self.lineWidth;
              ctx.lineCap = "round";
              ctx.strokeStyle = '#ffffff';
              ctx.lineWidth = lineWidth;
              ctx.moveTo(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top);
              mouseStyle.css({
                  position: 'fixed',
                  width: lineWidth + 'px',
                  height: lineWidth + 'px',
                  backgroundColor: '#fff',
                  border: '1px solid #000',
                  borderRadius: '50%'
              });
              $('.borad-container').append(mouseStyle);
              // 传给服务器的数据
              _self.eraserArr={
                "data":{
                  "x":[],
                  "y":[],
                  },
                  "attr":{
                    "shape":"round",
                    "size":lineWidth,
                    "color":'#ffffff'
                  }
              }
              _self.eraserArr.data.x.push((e.pageX - canvas.offset().left)/canvasWidth);
              _self.eraserArr.data.y.push((e.pageY - canvas.offset().top)/canvasHeight);
              break;
            default:
                break;
        }
      });
      $(document).on('mousemove', 'canvas', function (e) {
          e.stopImmediatePropagation();
          switch (_self.currentToolNum) {
              case '1':
                if (!moving) return false;
                ctx.lineTo(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top);
                _self.linePointArr.data.x.push((e.pageX - canvas.offset().left)/canvasWidth);
                _self.linePointArr.data.y.push((e.pageY - canvas.offset().top)/canvasHeight);
                ctx.stroke();
                break;
              case '3':
                  if (!moving) return false;
                  _self.rectTempAttr.width = e.pageX - _self.rectTempAttr.left;
                  _self.rectTempAttr.height = e.pageY - _self.rectTempAttr.top;
                  wTemp = e.pageX - _self.rectTempAttr.left;
                  hTemp = e.pageY - _self.rectTempAttr.top;
                  break;
              case '4':
                if (!moving) return false;
                _self.loadCanvasImg(_self.canvasUrl);
                _self.stopPoint.x = e.pageX - canvas.offset().left;
                _self.stopPoint.y = e.pageY - canvas.offset().top;
                _self.arrowCoord(_self.beginPoint, _self.stopPoint);
                _self.sideCoord();
                _self.drawArrow();
                break;
              case '5':
                if (!moving) return false;
                mouseStyle.css({
                    left: e.pageX - lineWidth / 2 + 'px',
                    top: e.pageY - lineWidth / 2 + 'px'
                });
                ctx.lineTo(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top);
                
                _self.eraserArr.data.x.push((e.pageX - canvas.offset().left)/canvasWidth);
                _self.eraserArr.data.y.push((e.pageY - canvas.offset().top)/canvasHeight);
                ctx.stroke();
                break;
              default:
                  break;
          }
      });
      $(document).on('mouseup', function (e) {
          e.stopImmediatePropagation();
          switch (_self.currentToolNum) {
              case '1':
                moving = false;
                ctx.closePath();
                _self.drawImage('point');
                _self.drawCanvas('point');
                break;
              case '2':
                  break;
              case '3':
                  moving = false;
                  ctx.beginPath();
                  ctx.strokeStyle = '#' + _self.pageLineColor;
                  ctx.fillStyle = 'rgba(255,255,255,0)';
                  ctx.rect(xTemp, yTemp, wTemp, hTemp);
                  ctx.stroke();
                  ctx.fill();
                  ctx.closePath();
                  _self.rectTempPositionShow = false;
                  // 传给服务器的数据
                  _self.rectArr={
                    "data":{
                      "x":xTemp/600,
                      "y":yTemp/600,
                      "w":wTemp/600,
                      "h":hTemp/600,
                    },
                    "attr":{
                      "size":_self.lineWidth,
                      "color":'#' + _self.pageLineColor,
                      "fillColor":'rgba(255,255,255,0)'
                    }
                  }
                  _self.rectArrData.enddata={
                    "x":(e.pageX - canvas.offset().left)/canvasWidth,
                    "y":(e.pageY - canvas.offset().top)/canvasHeight
                  }
                  _self.drawImage('rect');
                  _self.drawCanvas('rect')
                  xTemp = yTemp = wTemp = hTemp = 0;
                  break;
              case '4':
                moving = false;
                // _self.drawArrow();
                // 传给服务器的数据
                _self.arrowArr={
                  "data":_self.polygonVertex,
                  "attr":{
                    "color":'#' + _self.pageLineColor
                  }
                }
                _self.arrowArrData.enddata={
                  "x":(e.pageX - canvas.offset().left)/canvasWidth,
                  "y":(e.pageY - canvas.offset().top)/canvasHeight
                }
                _self.drawImage('arrow');
                _self.drawCanvas('arrow');
                break;
              case '5':
                moving = false;
                mouseStyle.remove();
                ctx.closePath();
                _self.drawImage('eraser');
                _self.drawCanvas('eraser');
                break;
              default:
                  break;
          }
      });
    },
    // 画图
    loadImage(img_src){
      this.ctxOrign.clearRect(0,0,600,600)
      let img = new Image();
      img.onload = ()=> {
        this.ctxOrign.drawImage(img, 0, 0,600,600);
      };
      img.src = img_src;
    },
    loadCanvasImg(img_src){
      this.ctxOrign.clearRect(0,0,600,600)
      var img = new Image();
      img.src = img_src;
      this.ctxOrign.drawImage(img,0,0,600,600);
    },
    // 格式化图的值
    getAttrValue: function (target, attr, unit) {
      unit = unit || "";
      return '' + target.css(attr).replace(unit, '');
    },
    // 白板输入框
    bindInputText: function (e) {
      this.inputTextValue = $(e.target).val();
    },
    // socket绘图，接收图
    drawImage(res){
      let obj={}
      if(res=='point'){
        if(Object.keys(this.linePointArr).length!=0){
          this.linePointArr.type=res;
          this.typeArr=this.typeArr.concat(this.linePointArr)
        }
      }else if(res=='font'){
        if(Object.keys(this.fontArr).length!=0){
          this.fontArr.type=res;
          this.typeArr.push(this.fontArr)
        }
      }else if(res=='rect'){
        if(this.rectArrData.data){
          this.rectArrData.type=res;
          this.typeArr=this.typeArr.concat(this.rectArrData)
        }
      }else if(res=='eraser'){
        if(Object.keys(this.eraserArr).length!=0){
          this.eraserArr.type=res;
          this.typeArr.push(this.eraserArr)
        }
      }else if(res=='arrow'){
        if(this.arrowArrData.data){
          this.arrowArrData.type=res;
          this.typeArr.push(this.arrowArrData)
        }
      }
      obj = {
        "account":this.formItem.name,
        "imgId":this.imgId,
        "imgUrl":this.imgSrc, //图片的路
        "data":this.typeArr
      };
      this.bothTypeArr=obj;
      this.rectArrData={}
      this.arrowArrData={}
    },
    // 本地画图传给服务器
    drawCanvas(res){
      let obj={}
      if(res=='point'){
        obj = {
          "imageid":this.imgId,
          "type": res,
          "data":this.linePointArr,
        };
      }else if(res=='font'){
        obj={
          "imageid":this.imgId,
          "type": res,
          "data":this.fontArr
        }
      }else if(res=='rect'){
        obj={
          "imageid":this.imgId,
          "type": res,
          "data":this.rectArr
        }
      }else if(res=='eraser'){
        obj={
          "imageid":this.imgId,
          "type": res,
          "data":this.eraserArr
        }
      }else if(res=='arrow'){
        obj={
          "imageid":this.imgId,
          "type": res,
          "data":this.arrowArr
        }
      }
      this.socket.emit('draw-info',obj);
      // 清空数据
      this.linePointArr={}
      this.fontArr={}
      this.rectArr={}
      this.eraserArr={}
    },
    // 获取到服务器数据进行画线
    getDrawCanvas(res){
      if(res.type=="point"){//画线
        this.ctxOrign.beginPath();
        this.ctxOrign.strokeStyle = res.data.attr.color;
        this.ctxOrign.lineWidth = res.data.attr.size;
        this.ctxOrign.moveTo(res.data.data.x[0]*600,res.data.data.y[0]*600);
        for(let i=1;i<res.data.data.x.length;i++){
          this.ctxOrign.lineTo(res.data.data.x[i]*600,res.data.data.y[i]*600);
          this.ctxOrign.stroke();
        }
        this.ctxOrign.closePath();
      }else if(res.type=="font"){//画文字
        this.ctxOrign.font = res.data.attr.size + "px Microsoft Yahei";
        this.ctxOrign.fillStyle = '#' + res.data.attr.color;
        this.ctxOrign.textBaseline = "top";
        this.ctxOrign.fillText(res.data.data.text,res.data.data.x*600,res.data.data.y*600);
        this.ctxOrign.fillStyle = '#' + res.data.attr.color;
      }else if(res.type=="rect"){//画矩形
        this.ctxOrign.beginPath();
        this.ctxOrign.strokeStyle = '#' + res.data.attr.color;
        this.ctxOrign.fillStyle = res.data.attr.fillColor;
        this.ctxOrign.rect(res.data.data.x*600, res.data.data.y*600, res.data.data.w*600, res.data.data.h*600);
        this.ctxOrign.stroke();
        this.ctxOrign.fill();
        this.ctxOrign.closePath();
      }else if(res.type=="eraser"){//橡皮擦
        this.ctxOrign.beginPath();
        this.ctxOrign.lineCap = "round";
        this.ctxOrign.strokeStyle = res.data.attr.color;
        this.ctxOrign.lineWidth = res.data.attr.size;
        this.ctxOrign.moveTo(res.data.data.x[0]*600,res.data.data.y[0]*600);
        for(let i=1;i<res.data.data.x.length;i++){
          this.ctxOrign.lineTo(res.data.data.x[i]*600,res.data.data.y[i]*600);
          this.ctxOrign.stroke();
        }
        this.ctxOrign.closePath();
      }else if(res.type=="arrow"){//箭头
        this.ctxOrign.fillStyle = res.data.attr.color;
        this.ctxOrign.beginPath();
        this.ctxOrign.moveTo(res.data.data[0], res.data.data[1]);
        this.ctxOrign.lineTo(res.data.data[2], res.data.data[3]);
        this.ctxOrign.lineTo(res.data.data[4], res.data.data[5]);
        this.ctxOrign.lineTo(res.data.data[6], res.data.data[7]);
        this.ctxOrign.lineTo(res.data.data[8], res.data.data[9]);
        this.ctxOrign.lineTo(res.data.data[10], res.data.data[11]);
        this.ctxOrign.closePath();
        this.ctxOrign.fill();
      }
    }
  }
}
</script>

<style scoped lang='scss'>
// 白板
.borad-container {
  width: 50%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #ddd;
  // 操作按钮
  .option-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .toolbar_ul {
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .toolbar_li,
      .active {
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
      }
      .active {
        background-color: #fff;
      }
    }
  }
  .tempRect {
    position: fixed;
    background-color: rgba(255, 255, 255, 0);
  }
  .input-position {
    position: fixed;
    border: 1px solid #666;
  }
  //面板
  .panel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    .painter-box {
      background-color: #fff;
    }
  }
}
</style>
